const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    devtool:'cheap-module-source-map',
    devServer:{
        port:3500,
        hot:true,
        open:true
    },
    resolve:{
        extensions:['.js','.css'],
        alias:{
            'styles':resolve(__dirname,'./src/styles/')
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            },
            {
                test: /\.s[ac]ss$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
            },
            {
                test:/\.(png|jpg|jpeg|gif)$/,
                type:'asset/resource'
            },
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:'babel-loader'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:resolve(__dirname,'./src/index.html'),
            minify:false,
            hash:true,
            inject:'body'
        })
	]
}